/**
* Created by xudesong on 2019/1/14.
*/

<template>
    <div class="Son1">
        <span class="son1111">这是儿子组件 son1111</span>
        <p>_11:{{messageData}}</p>
        <p>_221:{{age}}</p>
        <button @click="reverseMessage">反转消息  儿子 son1111 </button>
        <input type="checkbox" :checked="checked" @change="changed"/>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
    import Component from 'vue-class-component'
    @Component
    export default class Son1 extends Vue{
        @Prop() age!:number;
        @Model("change") checked!:number;
        messageData= 'Hello 11o2222m子组件!'
        reverseMessage() {
            console.log( "this.message: age ",this.messageData,this.age);
            this.messageData = this.messageData&&this.messageData.split('').reverse().join('')
         };
        changed(event:any){ /* 这里是偷懒写的any，在实际项目中需要避免 */
            console.log( "this.: change ",event.target.value);
            this.$emit("change",event.target.value)
        }
    }
</script>

<style scoped lang="scss">
    .Son1{
        width: 100%;
        height: 500px;
        background-color: gainsboro;
        .son1111{
            color: greenyellow;
            transform: rotate(45deg);
        }
    }

</style>